<link rel="stylesheet" href="index.less">
<template>
  <el-dialog
      :class="styles['print-card-tag-dialog']"
      :model-value="open"
      @close="emit('close')"
      width="420" append-to-body destroy-on-close center
  >
    <ul :class="[styles['card-list'], 'ato-scroll-bar']" id="printRef">
      <template v-for="group in stateList">
        <li
            v-for="item in group.cardInfos" :key="group.orderNo + item.cardId"
            style="page-break-before: always;display: flex;justify-content: space-between; align-items: center;border-radius: 10px;border: 2px solid #303133;padding: 4px 16px;margin-bottom: 16px;"
        >
          <div>
            <p style="margin-bottom: -12px">卡牌UID: {{ item.cardId }}</p>
            <p style="margin-bottom: -12px">属主UID: {{ item.mainUID }}</p>
            <p>送卡订单: {{ group.orderNo }}</p>
          </div>
          <qr-code :url="item.cardId"/>
        </li>
      </template>
    </ul>
    <template #header>
      <p :class="styles['title']">本单送拍卡牌标签</p>
      <p :class="styles['title']">（请连接热敏打印机打印）</p>
    </template>
    <template #footer>
      <el-button type="primary" size="large" class="ato-w160" @click="print">打印</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="PrintCardTag">
import {QrCode} from '@/components'
import { Close } from '@element-plus/icons-vue'
import printJS from 'print-js'
const props = defineProps({
  open: Boolean,
  stateList: Array
})
const emit = defineEmits(['close'])

// 打印
const print = () => {
  printJS({
    printable: 'printRef',
    type: 'html',
    css: '',
    style: `
            @page{ margin: 3.5cm 0.5cm; }
    `,
    scanStyles: false,
    targetStyles: ['*']
  })
}
</script>

<style lang="less" src="./index.less" module="styles">
</style>
